<template>
  <div class="listperson">
        <table align="center" border="1" cellpadding="0" cellspacing="0"  style="width:80%;margin:35px auto;">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>职务</th>
            <th>薪资</th>
            <th>入职时间</th>
            <th>操作</th>
        </tr>
        <tr align="center" v-for="(item,index) in SelectVuex" :key="index">
            <td>{{index+1}}</td>
            <td>{{item.uname}}</td>
            <td>{{item.newGender}}</td>
            <td>{{item.age}}</td>
            <td>{{item.newPort}}</td>
            <td>{{item.salary}}</td>
            <td>{{item.ctime}}</td>
            <td>
                <button @click="goEdit(index)">编辑</button>
                <button @click="del(index)">删除</button>
            </td>
        </tr>
        </table>
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';

export default {
    name:"ListPerson",
    //事件函数，需要触发
    methods:{
        ...mapMutations(['dellist']),
        //删除函数
        del(index){
            this.dellist(index);
        },

        //跳转到编辑页
        goEdit(index){
            console.log(index);
            

            this.$router.push('/home/editperson?i='+index);
        }
    },
    //计算属性内部的函数是自动执行且可以作为数据循环
    computed:{
        //获取vuex的state内部的数据
        ...mapState(['plist']),
        //如果不用快捷方法：this.$store.state.plist

        //对数据进行加工
        SelectVuex(){
            //备份
            let plist = this.plist;
            //遍历，数据加工
            for( let item of plist){
                item.newGender = item.gender == 0 ? '女' : '男';
                //一个变量多种可能
                switch( item.port ){
                    case 1: item.newPort = '老板'; break;
                    case 2: item.newPort = '总经理'; break;
                    case 3: item.newPort = '部门主管'; break;
                    case 4: item.newPort = '组长'; break;
                    case 5: item.newPort = '员工'; break;
                }
            }
            console.log(plist);
            
            //新数据导出
            return plist;
        }
    },
}
</script>

<style>

</style>